<template>
  <div class="UserManage-container">
    <div class="UserManage-table" v-if="userList.length">
      <el-table
        :data="userList"
        border
        max-height="80%"
        :default-sort="{ prop: 'date', order: 'descending' }"
        style="width: 100%"
      >
        <el-table-column label="创建日期" sortable width="180">
          <template slot-scope="scope">
            <svg-icon icon-class="date"></svg-icon>
            <span style="margin-left: 10px">{{
              scope.row.create_time | formatDate
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="80">
          <template slot-scope="scope">
            <el-popover trigger="click" placement="top">
              <p>姓名: {{ scope.row.name }}</p>
              <p>邮箱: {{ scope.row.email }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag @click="getRoleListById(scope.row.id)" size="medium">{{
                  scope.row.name
                }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="推荐码">
          <template slot-scope="scope">
            <span>{{ scope.row.referral_code }}</span>
          </template>
        </el-table-column>
        <el-table-column label="最后登录IP" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.last_login_ip }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.review_status ? '已通过' : '未通过' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              :content="!scope.row.review_status ? '通过审核' : '取消审核'"
              placement="top"
            >
              <el-button
                type="success"
                v-if="!scope.row.review_status"
                size="mini"
                circle
                icon="el-icon-check"
                @click="UserReview(scope.$index, scope.row)"
              ></el-button>
              <el-button
                type="danger"
                v-else
                size="mini"
                circle
                icon="el-icon-close"
                @click="UserReview(scope.$index, scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        small
        :limit="limit"
        :page-size="limit"
        :current-page="page"
        @current-change="pageChange"
        layout="prev, pager, next"
        :total="count"
      >
      </el-pagination>
    </div>
    <div v-else style="display:flex;justify-content:center">
      <img style="width:50%;margin:0 auto" src="@/assets/img/user-empty.png" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  components: {},
  computed: {
    // 混入用户信息
    userInfo() {
      return this.$store.state.user.userInfo
    }
  },
  data() {
    return {
      limit: 10,
      page: 1,
      count: 0,
      // 用户列表
      userList: [],
      // 分配角色参数
      content: '',
      formLabelWidth: '80px',
      user: {
        department_id: 0
      }
    }
  },
  watch: {
    userInfo: {
      immediate: true,
      handler(val) {
        this.user = val
      }
    }
  },
  created() {
    // 获取用户列表
    this.$nextTick(() => {
      console.log(this.userInfo)
      this.getUserList()
    })
  },
  methods: {
    // 页数变换
    pageChange(page) {
      this.page = page
      this.getUserList()
    },
    // 获取用户列表
    async getUserList() {
      const { limit, page } = this
      const res = await this.$API.department.getDepartmentMember(
        this.user.department_id ? this.user.department_id : 0,
        limit,
        page
      )
      if (!res.data) return (this.userList = [])
      if (res.status == 200) {
        this.count = res.data.count
        this.userList = res.data.payload
      }
    },
    // 审批用户
    async UserReview(id, user) {
      console.log(!user.review_status)
      let datas = {
        uid: user.id,
        status: user.review_status ? 0 : 1
      }
      console.log(datas)
      const res = await this.$API.user.UserReview(this.$qs.stringify(datas))
      if (res.status == 200) {
        this.$message.success(user.review_status ? '取消审核成功' : '审核成功')
        this.getUserList()
        this.content = ''
      }
    }
  }
}
</script>
<style scoped>
.UserManage-container {
  width: 100%;
  padding: 20px;
}
.UserManage-table {
  width: 100%;
  margin: 10px auto;
}
</style>